<script setup>
import StringOrMumber from "../../../StringOrMumber.vue";
import {deleteTableRow} from "../../../../../utils/utils.js";
import {reactive, ref} from "vue";
const props = defineProps({
  probeConfig: {
    type: Object,
  },
  containerIndex: {
    type: Number,
  },
  probeType: {
    type: String
  },
  containerType: {
    type: String,
  },
})
const rules =reactive({
  port: [
    {required: true,message: '请输入需要探测的端口号',trigger: 'blur'},
  ]
})
const editHttpHeaders = ref(false)
const  addHeader=()=>{
  const header={
    name: "",
    value: ""
  }
  props.probeConfig.httpGet.httpHeaders.unshift(header)
}

</script>

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-form-item label="请求端口" :rules="rules.port"  :prop="('spec.template.spec.containers.'+props.containerIndex+'.'+props.probeType+'.httpGet.port')" required>
        <string-or-mumber v-model:data="props.probeConfig.httpGet.port" placeholder="请输入请求的端口号" input-width="200px" ></string-or-mumber>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="请求主机" prop="" >
        <el-input style="width: 240px" v-model="props.probeConfig.httpGet.host" placeholder="请输入请求的主机(可选)"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="请求路径" prop="" >
        <el-input style="width: 240px" v-model="props.probeConfig.httpGet.path" placeholder="请输入请求的接口(可选)"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item label="请求协议" prop="" >
        <el-select v-model="props.probeConfig.httpGet.scheme">
          <el-option
              v-for="s in ['HTTP','HTTPS']"
              :key="s"
              :label="s"
              :value="s"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="18">
      <el-form-item label="自定义请求头">
        <el-table
            border
            height="140px"
            :data="props.probeConfig.httpGet.httpHeaders"
        >
          <el-table-column align="center" prop="name" label="请求头名称">
            <template #default="scope">
              <el-input v-model.trim="scope.row.name" placeholder="请求头名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="value" label="请求头的值">
            <template #default="scope">
              <el-input v-model.trim="scope.row.value" placeholder="请求头的值"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <el-button link type="primary" @click="addHeader()">添加</el-button>
            </template>
            <template #default="scope">
              <el-button link type="warning" @click="deleteTableRow(props.probeConfig.httpGet.httpHeaders,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-col>
  </el-row>
</template>
<style scoped>
</style>